<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleCreate">新增</a-button>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '编辑',
              onClick: handleEdit.bind(null, record),
            },
            {
              label: '启用',
              onClick: handleOpen.bind(null, record),
            },
            {
              label: '删除',
              color: 'error',
              popConfirm: {
                title: '是否确认删除',
                confirm: handleDelete.bind(null, record),
              },
            },
          ]"
        />
      </template>
      <template #icon="{ record, text }">
        <ImagePreview :imageList="text" class="preview-img" />
      </template>
    </BasicTable>
    <Modal @register="registerModal" @success="handleSuccess" />
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { ImagePreview } from '/@/components/Preview/index';
  import { BasicTable, useTable, TableAction, BasicColumn, FormSchema } from '/@/components/Table';
  import { PageWrapper } from '/@/components/Page';
  import { useModal } from '/@/components/Modal';
  import Modal from './modal.vue';
  import { accessoriesData } from './accessories.data';
  const columns: BasicColumn[] = [
    {
      title: '设施名称',
      dataIndex: 'name',
    },
    {
      title: '所属类别',
      dataIndex: 'type',
      format(value) {
        return ['业主配套特点', '房屋配置特点'][value];
      },
    },
    {
      title: '图标',
      dataIndex: 'icon',
      slots: { customRender: 'icon' },
    },
    {
      title: '状态',
      dataIndex: 'status',
      format(value) {
        return ['已禁用', '正常'][value];
      },
    },
  ];
  const searchFormSchema: FormSchema[] = [
    {
      field: 'name',
      label: '设施名称',
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
      },
      colProps: {
        span: 6,
      },
    },
    {
      field: 'type',
      label: '所属类别',
      component: 'Select',
      componentProps: {
        options: [
          { label: '业主配套特点', value: 0 },
          { label: '房屋配置特点', value: 1 },
        ],
      },
      colProps: {
        span: 6,
      },
    },
    {
      field: 'status',
      label: '状态',
      component: 'Select',
      componentProps: {
        options: [
          { label: '状态一', value: 0 },
          { label: '状态二', value: 1 },
        ],
      },
      colProps: {
        span: 6,
      },
    },
  ];

  export default defineComponent({
    name: 'Accessories',
    components: { BasicTable, PageWrapper, Modal, TableAction, ImagePreview },
    setup() {
      const [registerModal, { openModal }] = useModal();
      const [registerTable, { reload }] = useTable({
        // api: listApi,
        dataSource: accessoriesData,
        columns,
        formConfig: {
          labelWidth: 80,
          schemas: searchFormSchema,
        },
        useSearchForm: true,
        bordered: true,
        actionColumn: {
          width: 150,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
      });

      function handleCreate() {
        openModal(true, {
          isUpdate: false,
        });
      }

      function handleEdit(record: Recordable) {
        openModal(true, {
          record,
          isUpdate: true,
        });
      }

      function handleOpen(record: Recordable) {
        console.log('handleOpen', record);
      }

      async function handleDelete(record: Recordable) {
        // await DeleteApi([record.userId]);
        reload();
      }

      function handleSuccess() {
        reload();
      }

      return {
        registerTable,
        registerModal,
        handleCreate,
        handleEdit,
        handleOpen,
        handleDelete,
        handleSuccess,
      };
    },
  });
</script>
<style scoped lang="less">
  .preview-img {
    width: 150px;
    display: flex;
    justify-content: center;
  }
</style>
